<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>喜乐欢购-首页</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/HomePage.css">
    <script src="js/flexible.js"></script>
</head>

<body>
    <header>
        <div class="search">
            <input type="text" placeholder="超级品牌日直降送豪礼">
            <span>
                <img src="./imgaes/message@3x.png" alt="">
                消息
            </span>
        </div>
        <div class="navs">
            <ul class="nav">
                <li><a src="#">首页</a></li>
                <li><a src="#">手机</a></li>
                <li><a src="#">家用电器</a></li>
                <li><a src="#">酒水</a></li>
                <li><a src="#">厨卫</a></li>
                <li><a src="#">服务</a></li>
                <li><a src="#">酒水</a></li>
                <li><a src="#">厨卫</a></li>
                <li><a src="#">服务</a></li>
            </ul>
        </div>

        <div class="banner">
            <img src="./imgaes/banner.png" alt="">
        </div>
    </header>
    <ul class="nave-to">
        <li>
            <img src="./imgaes/fushi@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//chaoshi@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//pingou@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//jaidian@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//meishi@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//shuiguo@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//kaquan@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//qiandap@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//红包2@3x.png" alt="">
            <span>百货商店</span>
        </li>
        <li>
            <img src="./imgaes//火热1 (2)@3x.png" alt="">
            <span>百货商店</span>
        </li>
    </ul>
    <!-- 第三部分 -->
    <div class="imgt">
        <div class="imgtl">
            <h3>新人专享 首单包邮</h3>
            <p>RAY面膜低至49元/盒</p>
        </div>
        <div class="imgtrr">
            <div class="imgtr">
                <div class="imgtr1">
                    <h3>美妆新人</h3>
                    <p>艾敬气垫仅145</p>
                    <span>立即抢购 ></span>
                </div>
            </div>
            <div class="imgtr2">
                <h3>母婴新人</h3>
                <p>爆款好货</p>
                <span>立即抢购 ></span>
            </div>
        </div>
    </div>
    <!-- 第四部分 -->
    <div class="much">
        <div class="muchs">
            <div class="muchsl">
                <h3>限时秒杀</h3>
                <p>人气好货限时抢</p>
            </div>
            <div class="muchsr">
                <ul>
                    <li><img src="imgaes/热卖@2x.png" alt=""></li>
                    <li>14</li>
                    <span>:</span>
                    <li>26</li>
                    <span>:</span>
                    <li>26</li>
                </ul>
            </div>
        </div>
        <ul class="usl">
            <li>
                <img src="imgaes/hmg.png" alt="">
                <p>￥12.9</p>
            </li>
            <li>
                <img src="imgaes/xg.png" alt="">
                <p>￥12.9</p>
            </li>
            <li>
                <img src="imgaes/t.png" alt="">
                <p>￥12.9</p>
            </li>
            <li>
                <img src="imgaes/bg.png" alt="">
                <p>￥12.9</p>
            </li>
        </ul>
    </div>
    <!-- 第五部分 -->
    <div class="bg">
        <img src="imgaes/sp.png" alt="">
    </div>
    <!-- 第六部分 -->
    <div class="bg2">
        <div class="bgl">
            <h3>周四工作餐</h3>
            <p>大牌五折起</p>
        </div>
        <div class="bgr">
            <h3>一成一味</h3>
            <p>大牌五折起</p>
        </div>
    </div>
    <ul class="cont">
        <li>
            <h3>榜单</h3>
            <p>人气爆品</p>
        </li>
        <li>
            <h3>特惠</h3>
            <p>9.9元</p>
        </li>
        <li>
            <h3>大牌</h3>
            <p>精选五折</p>
        </li>
        <li>
            <h3>懂你</h3>
            <p>轻食减脂</p>
        </li>
    </ul>
    <!-- 第七部分 -->
    <div class="sp">
        <ul class="uks">
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
            <li style="width: 4.48rem; height: 6.8rem;  margin-right: .16rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text">
                    <p>Apple/苹果 iPhone 12 12mini正品12pro max</p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
            </li>
        </ul>
        <ul class="uks">
            <li style="width: 4.48rem; height: 7.84rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text text-p">
                    <p style=padding:0;><span>直营</span>Apple/苹果 iPhone 12 12mini正品12pro </p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
                <div class="img">
                    <img src="imgaes/xiaoliang(1)@3x.png" alt="">
                </div>
            </li>
            <li style="width: 4.48rem; height: 7.84rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text text-p">
                    <p style=padding:0;><span>直营</span>Apple/苹果 iPhone 12 12mini正品12pro </p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
                <div class="img">
                    <img src="imgaes/xiaoliang(1)@3x.png" alt="">
                </div>
            </li>
            <li style="width: 4.48rem; height: 7.84rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text text-p">
                    <p style=padding:0;><span>直营</span>Apple/苹果 iPhone 12 12mini正品12pro </p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
                <div class="img">
                    <img src="imgaes/xiaoliang(1)@3x.png" alt="">
                </div>
            </li>
            <li style="width: 4.48rem; height: 7.84rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text text-p">
                    <p style=padding:0;><span>直营</span>Apple/苹果 iPhone 12 12mini正品12pro </p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
                <div class="img">
                    <img src="imgaes/xiaoliang(1)@3x.png" alt="">
                </div>
            </li>
            <li style="width: 4.48rem; height: 7.84rem;">
                <img src="imgaes/Background@3x.png" alt="">
                <div class="text text-p">
                    <p style=padding:0;><span>直营</span>Apple/苹果 iPhone 12 12mini正品12pro </p>
                </div>
                <div class="text-e">
                    <span>￥5499</span>
                    <p>5810+评论</p>
                </div>
                <div class="img">
                    <img src="imgaes/xiaoliang(1)@3x.png" alt="">
                </div>
            </li>
        </ul>
    </div>
    <footer>
        <a href="">
            <img src="imgaes/home-1@3x.png" alt="">
            <p>首页</p>
        </a>
        <a href="">
            <img src="imgaes/classify-2@3x.png" alt="">
            <p style="color: #ff6200;">分类</p>
        </a>
        <a href="">
            <img src="imgaes/shop-1@3x.png" alt="">
            <p>购物车</p>
        </a>
        <a href="">
            <img src="imgaes/mine-1@3x.png" alt="">
            <p>我的</p>
        </a>
    </footer>
</body>

</html>